<script type="text/javascript" charset="utf-8">

			/* Global var for counter */
			var positionCount = 0;
			
			$(function(){
				// input check
			    $("#btnPriview").click(function(){

				    var isOkFlg = "OK";
			    	$("#electionFrom input").each(function(i){
			    		
					  	if(!$(this).val().length){
					  		$(this).css("background-color","#ffb6c1");
					  		isOkFlg = "NG";
						 }else{
							if($(this).css("background-color") == "rgb(255, 182, 193)"){;
								$(this).css("background-color","#FFFFFF");
							}
						}
					});
			    	if(isOkFlg == "OK"){
						//form submit
						//$("#electionFrom").attr("action","<!--{$smarty.const.HTTP_URL}-->elect/elect_detail.php");
						$("#electionFrom").submit();
					 }
			    });

				//add Position
				$("#addPosition").click(function(){
					 addPosition();
					 positionCount++;
					 
				});
				
				//delete Position
				$("#deletePosition").click(function(){
					if(positionCount >0){
						$("#div-"+ positionCount).remove();
						positionCount--;
					}
				});

				 $.datepicker.setDefaults($.datepicker.regional['nl']); 
				 $.datepicker.setDefaults({ dateFormat: 'yy-mm-dd' });
				$( "#StartDate" ).datepicker({
					changeMonth: true,
					changeYear: true
				});
				

				$( "#endDate" ).datepicker({
					changeMonth: true,
					changeYear: true
				});
			});
			
			//add Position
			function addPosition(){
				var maxDiv = $('#div-'+(positionCount));
				if(maxDiv.length){
					maxDiv.append(getAppendDivStr());
				}
			}

			//
			function getAppendDivStr(){
				var appendStr = "";
					appendStr += '<div id = "div-'+ (positionCount+1) +'"style="margin-top:30px;"> ';
					appendStr += '	<table cellpadding="0" cellspacing="0" border="0" class="display" > ';
					appendStr += '		<thead> ';
					appendStr += '			<tr> ';
					appendStr += '				<th colspan = "2" align="left">Position '+(positionCount+1) +': ';
					appendStr += '					<input name ="positionName['+ (positionCount+1) +']"  type="text" maxlength=30></input> ';
					appendStr += '					<label style="margin-left:10px;">Select Max<font size="2" color="red">*</font></label> ';
					appendStr += '					<input name ="selectMax['+ (positionCount+1) +']" type="text" maxlength=3 value = "1" style="margin-left:10px;margin-top:10px;width:30px"/> ';
					appendStr += '				</th>  ';
					appendStr += '				<th colspan = "2" align="right">  ';
					appendStr += '					<a href="javascript:void(0);"  onclick= "addCandidate('+ (positionCount+1) +');">add candidate</a>  ';
					appendStr += '					<a href="javascript:void(0);"  onclick= "deleteCandidate('+ (positionCount+1) +');" style="margin-left:10px;">delete candidate</a>  ';
					appendStr += '				</th>  ';
					appendStr += '			</tr>  ';
					appendStr += '		</thead>  ';
					appendStr += '	</table> ';
					appendStr += '	<div id = "inputDiv-'+ (positionCount+1) +'" style="margin-top:10px;"> ';
					//appendStr += '		<input id = "inputDiv-input-'+ nextMaxId +'" name="inputDiv-input-'+ nextMaxId +'" type="text" maxlength="30" style="margin-left:30px;margin-top:10px;"> ';
					appendStr += '	</div> ';
					appendStr += '</div> ';
					return appendStr;
			}

			function addCandidate(maxId){
				var addToDiv = $('#inputDiv-'+maxId);
				
				if(addToDiv.length){
					addToDiv.append(getAppendInputStr(maxId));
				}
			}

			function deleteCandidate(maxId){
				//var remove = $('#'+removeFromDivId);
				$("#inputDiv-"+maxId +" input:last").remove();
			}

			function getAppendInputStr(Id){
				//var nextId = parseInt(maxId) +1;
				return '<input name=candidate['+Id+'][]" type="text" maxlength="30" style="margin-left:30px;margin-top:10px;">';
			}
			
		</script>
		
<div id="main-wrapper">
  <div id="main" class="clearfix with-navigation">
    <div id="content" class="column">
      <div class="section">		
		
		  <div class="tabs">
          <ul class="tabs primary clearfix">
            <li >
              <a href="<!--{$smarty.const.HTTP_URL}-->mypage/index.php" >
                <span class="tab">members Management</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="tab">Announcement/even Management</span>
              </a>
            </li>
            <li>
              <a href="<!--{$smarty.const.HTTP_URL}-->conference/index.php">
                <span class="tab">conference Management</span>
              </a>
            </li>
             <li class="active">
              <a href="<!--{$smarty.const.HTTP_URL}-->elect/elect.php">
                <span class="tab">elect Management</span>
              </a>
            </li>
            <li>
              <a href="#">
                <span class="tab">payment Management</span>
              </a>
            </li>
          </ul>
        </div>
      	
        <div class="tabs" style="margin-top:10px;">
          <ul class="tabs primary clearfix">
            <li>
              <a href="<!--{$smarty.const.HTTP_URL}-->elect/elect.php" >
                <span class="tab">Elect List</span>
              </a>
            </li>
            <li class="active">
              <a href="<!--{$smarty.const.HTTP_URL}-->elect/elect.php?mode=newEcect" class="active">
                <span class="tab">Creat New Elect</span>
              </a>
            </li>
          </ul>
        </div>
        
        	<div class="breadcrumb" style="margin-bottom:50px;margin-top:10px;">
        	<h3>Election Publish 
        	<input id="btnPriview" type= "button" Value ="election priview"  style=" float:right; width:100px;"/>
        	</h3>
			<hr>
		</div>
        
		<div id="container2">
			<div id="demo">
				
			 	<form action="<!--{$smarty.const.HTTP_URL}-->elect/elect.php" method="post" id="electionFrom" >
	          		<input type="hidden" name="mode" id="mode" value="confirm" />
	          		<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
	          		
	          		
			 		<table cellpadding="0" cellspacing="0" border="0" class="display" id ="table-1">
						<thead>
								<th colspan = "4" style ="position:relative;margin-top:10px;align:left;">
										Election Tilte:
				 						<input name ="election" id="election" type="text" maxlength="30" style="margin-top:10px;"/>
				 						StartDate:<input name ="startDate" id="StartDate" type="text" maxlength=10 value = "" style="margin-top:10px;width:100px"/>
										End date:<input name ="endDate" id="endDate" type="text" maxlength=10 value = "" style="margin-top:10px;width:100px"/>
								</th>
						</thead>
					</table>
			 		
			 		<!--  block 1-->
			 		<div  id="apenndAera">
				 		<div id = "div-0" style="margin-top:30px;min-height:500px;margin-bottom:50px;">
							<table cellpadding="0" cellspacing="0" border="0" class="display" >
								<thead>
										<th colspan = "2" align="left">Position 0:
											<input name ="positionName[0]" type="text" maxlength=30></input>
											
											<label style="margin-left:10px;">Select Max<font size="2" color="red">*</font></label>
											<input name ="selectMax[0]" type="text" maxlength=3 value = "1" style="margin-left:10px;margin-top:10px;width:30px"/>
										</th>
										<th colspan = "2" align="right">
											<a href="javascript:void(0);"  onclick='addCandidate(0);' >add candidate</a>
											<a href="javascript:void(0);" onclick='deleteCandidate(0);' style="margin-left:10px;">delete candidate</a>
											<input id="addPosition" type= "button" value ="add Position" style="margin-left:40px;"/>
											<input id="deletePosition" type= "button" value ="delete Position" />
										</th>
								</thead>
							</table>
							<div id = "inputDiv-0" style="margin-top:10px;">
				 			</div>
						</div>
					</div>
				</form>
			</div><!--demo -->
			<!-- footer-->
		</div><!--container -->
	</div>
</div>
</div>